<template>
    <div  class="set-eltree-textsize">

      <span class="inputstyle"> <el-input v-model="filtertext"></el-input></span>
      <el-tree :data="projects" :props="defaultProps"   :highlight-current=true  :expand-on-click-node=false node-key="id"
               @current-change="getCurrentProjectDto"
               :filter-node-method="filterNode"
               ref="projectTree"

      ></el-tree>
      <!--<el-button @click="test">click me</el-button>-->

    </div>
</template>

<script>
  import {getProject} from '../../../api/shuzhiCompare'
  import {mapState,mapGetters} from 'vuex'

    export default {
        name: "projectTree",
      watch:{
        filtertext(value){
          console.log(this.$refs)
          this.$refs.projectTree.filter(value)
        }
      },
      data(){
          return{
            filtertext:'',
            defaultProps:{
              children: 'children',
              label: 'name'
            },
            projects:[]
          }
      },
      methods:{

        getCurrentProjectDto(value1,value2){
           // console.log(value1)
            this.$emit("project-change",value1)


        },

        filterNode(value,data){
          if (!value) return true;
          return data.name.indexOf(value) !== -1;
        },

        getProjects(){
          let that = this
          //this.$store
          console.log(this.$store)

          if (this.$store.getters.syProjects.length != 0){
           // console.log(this.$store.getters.syProjects)
            this.projects = this.$store.getters.syProjects
            return
          }


          getProject().then(res=>{
            that.$store.dispatch("setProjects",res.data)
            that.projects = res.data
          }).catch(err=>{
            that.warn(err.data)
          })
        },
        initSelectedProject(){
          console.log('==========')
          console.log( this.$refs.projectTree)
          this.$refs.projectTree.setCheckedKeys([3]);
        },

        test(){
          this.$refs.projectTree.setCheckedKeys([3]);
        },

        warn(message) {
          this.$alert(message, '标题名称', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'info',
                message: `action: ${ action }`
              });
            }
          });
        },

      },
      props:[

      ],
      mounted(){
        this.initSelectedProject()
      },

      created(){
          this.getProjects()

      }

    }
</script>

<style scoped>

  .set-eltree-textsize >>> .el-tree-node__label {
    font-size: 20px;
  }

</style>
